<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta name="referrer" content="never">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_1079527_eb1g829bmy.css">
	<title>Mobile DouBan</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		html,body,main{
			height: 100%;
			position: relative;
		}
		a{
			text-decoration: none;
			color: #333;
		}
		body{
			font-size: 12px;
			line-height: 1.2;
		}
    main>section {
      height: calc(100% - 45px);
      padding: 10px;
      background: #fff;
      overflow: scroll;
      -webkit-overflow-scrolling: touch; /*ios 上增加弹性*/
    }
		main>section{
			display: none;
		}
		main>section:first-child{
			display: block;
		}
		footer{
			width: 100%;
			height: 50px;
			position: absolute;
			bottom: 0;
			display: flex;
			border-top:1px solid #ccc;
		}
		footer>div{
			flex:1;
			text-align: center;
		}
		footer>.active{
			color: #FF5722;
		}
		footer>div>span{
			display: block;
			padding-top: 5px;
		}
		.item {
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      padding-top: 10px;
    }
    .item>a{
      display: block;
      display: flex;
    }
    .item .cover,
    .item .cover img{
      width: 70px;
    }
    .item .detail {
      flex: 1;
      padding-left: 10px;
    }
    .item .detail h2{
      font-size: 16px;
    }
    .item .detail .extra{
      color: #999;
      margin-top: 4px;
    }
    .item .detail .score{
      color: #FF5722;
    }
    .loading {
      text-align: center;
      padding-top: 10px;
      display: none;
    }
    .loading .iconfont{
      display: inline-block;
      animation: 1s rotate linear infinite;
    }
    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg);  }
    }
		#search {
      height: calc(100% - 45px);
    }
    section .search-area{
      color: #333;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      position: relative;
    }
    section .search-area input {
      width: calc(100% - 50px);
      padding: 8px;
      background-color: #eee;
      border: none;
      border-radius: 2px;
      box-shadow: none;
      outline: none;
    }
    section .search-area .button{
      position: absolute;
      right: 0;
      padding: 8px 10px;
      background: #FF5722;
      color: #fff;
      border-radius: 2px;
      cursor: pointer;
    }
	</style>
</head>
<body>
	<main>
    <section id="top250">
      <div class="container">       
<!--    <div class="item">
          <a href="#">
            <div class="cover">
              <img src="http://img7.doubanio.com/view/movie_poster_cover/spst/public/p513344864.png" alt="">
            </div>
            <div class="detail">
              <h2>霸王别姬</h2>
              <div class="extra"><span class="score">9.3分</span> / 1000收藏</div>
              <div class="extra">1994 / 剧情、爱情</div>
              <div class="extra">导演: 张艺谋</div>
              <div class="extra">主演: 张艺谋、张艺谋、张艺谋</div>
            </div>
          </a>
        </div> -->
      </div>
      <div class="loading"><span class="iconfont icon-loading"></span></div>
    </section>
    <section id="beimei">
      <div class="container">
      </div>
      <div class="loading"><span class="iconfont icon-loading"></span></div>
    </section>
    <section id="search">
      <div class="wrap">
        <div class="search-area">
          <input type="text" placeholder="搜索电影"><span class="button"> 搜索</span>
        </div>
        <div class="search-result">
          <div class="container"></div>
          <div class="loading"><span class="iconfont icon-loading"></span> </div>
        </div>        
      </div>

    </section>
	</main>
	<footer>
		<div class="active"><span class="iconfont icon-bangdan"></span><span>Top250</span></div>
		<div><span class="iconfont icon-beimei"></span><span>北美</span></div>
		<div><span class="iconfont icon-sousuo"></span><span>搜索</span></div>
	</footer>
<script>
  var Helpers = {
  	//检测是否到达底部
  	isToBottom: function($viewport, $content) {
      return $viewport.height() + $viewport.scrollTop() + 30 > $content.height() 
    },
    //拼接DOM
  	createNode:function(movie){
  		var $node = $(`
					<div class="item">
	          <a href="#">
	            <div class="cover">
	              <img src="#" alt="">
	            </div>
	            <div class="detail">
	              <h2></h2>
	              <div class="extra"><span class="score">9.3分</span> / <span class="collection"></span>收藏</div>
	              <div class="extra"></div>
	              <div class="extra"></div>
	              <div class="extra"></div>
	            </div>
	          </a>
	        </div>
				`)
			$node.find('a').attr('href', movie.alt)
			$node.find('.cover img').attr('src',movie.images.small)
			$node.find('.detail h2').text(movie.title)
			$node.find('.detail score').text(movie.rating.average)
			$node.find('.detail .collection').text(movie.collect_count)  
      $node.find('.detail .extra').eq(0).text(movie.year + ' / ' + movie.genres.join('、')) 
      $node.find('.detail .extra').eq(1).text('导演：' + movie.directors.map(v=>v.name).join('、'))  
      $node.find('.detail .extra').eq(2).text('主演：' + movie.casts.map(v=>v.name).join('、'))    
			return $node
  	}
  } 
  //Top250页面
	var Top250 = {
	  init: function(){
	    var _this = this
	    this.$container = $('#top250')
	    this.$content = this.$container.find('.container')
	    this.page = 0
	    this.count = 10
	    this.isFinshed = false
	    this.isLoading = false
	    this.bind()
	    this.getData(function(data){
	      _this.renderData(data)
	      _this.page++
	    })
	  },
	  bind: function(){
	    var _this = this
	    //监听页面滚动
	    this.$container.on('scroll', function(){
	      if(Helpers.isToBottom(_this.$container, _this.$content) && !_this.isFinshed && !_this.isLoading){
	        _this.getData(function(data){
	          _this.renderData(data)
	          _this.page++
	          if(_this.page * _this.count > data.total) {
	            _this.isFinshed = true
	          }
	        })
	      }
	    })
	  },
	  //获取页面信息
	  getData: function(callback){
	    var _this = this
	    this.isLoading = true
	    this.$container.find('.loading').show(400)
	    $.ajax({
	      url: '//api.douban.com/v2/movie/top250',
	      data: {
	        start: this.count*this.page,
	        count: this.count
	      },
	      dataType: 'jsonp'
	    }).done(function(ret){
	      _this.isLoading = false
	      _this.$container.find('.loading').hide(400)
	      callback(ret)
	    })
	  },
	  //获取数据后拼接DOM并放进标签内
	  renderData(data){
	    var _this = this
	    data.subjects.forEach(function(item){
	      var $node = Helpers.createNode(item)
	      _this.$content.append($node)    
	    })
	  }
	}
	//北美排行榜页面
	var UsBoard = {
	  init: function(){
	    var _this = this
	    this.$container = $('#beimei')
	    this.$content = this.$container.find('.container')
	    this.getData(function(data){
	      _this.renderData(data)
	    })
	  },
	  getData: function(callback){
	    $.ajax({
	      url: '//api.douban.com/v2/movie/us_box',
	      data: {
	        start: 0,
	        count: 10
	      },
	      dataType: 'jsonp'
	    }).done(function(ret){
	      callback(ret)
	    })
	  },
	  renderData(data){
	    var _this = this
	    data.subjects.forEach(function(item){
	      var $node = Helpers.createNode(item.subject)  
	      _this.$content.append($node)    
	    })
	  }
	}
	//搜索页面
  var Search = {
    init: function() {
      this.page = 0
      this.count = 10
      this.isFinshed = false
      this.isLoading = false
      this.$container = $('#search')
      this.$content = this.$container.find('.container')
      this.bind()
    },

    bind: function() {
      var _this = this
      this.$container.find('.search-area .button').on('click', function(){
        _this.getData(function(data){
          _this.renderData(data)
        })
      })
      this.$container.find('.search-area input').on('keyup', function(e){
        if(e.key === 'Enter') {
          _this.getData(function(data){
          _this.renderData(data)
        })
        }
      })

      this.$container.on('scroll', function(){
        if(Helpers.isToBottom(_this.$container, _this.$container.find('.wrap')) && !_this.isFinshed && !_this.isLoading){
          _this.getData(function(data){
            _this.renderData(data)
            _this.page++
            if(_this.page * _this.count > data.total) {
              _this.isFinshed = true
            }
          })
        }
      })
    },

    getData: function(callback){
      var _this = this
      var keyword = this.$container.find('.search-area input').val()
      this.isLoading = true
      $.ajax({
        url: 'http://api.douban.com/v2/movie/search',
        data: {
          q: keyword
        },
        dataType: 'jsonp'
      }).done(function(ret){
        _this.isLoading = false
        callback(ret)
      })
    },

    renderData(data){
      var _this = this
      data.subjects.forEach(function(item){
        var $node = Helpers.createNode(item)
        _this.$content.append($node)    
      })
    }
  }
	//footer切换
  var Paging = {
    init: function(){
      this.$tabs = $('footer>div')
      this.$pages = $('main>section')
      this.bind()
    },
    bind: function(){
      var _this = this
      this.$tabs.on('click', function(){
        var $this = $(this)
        var index = $this.index()
        $this.addClass('active')
          .siblings().removeClass('active')
        _this.$pages.eq(index).fadeIn().siblings().fadeOut()
      })
    }
  }

	var app = {
		init:function(){
			Paging.init()
		  Top250.init()
		  UsBoard.init()
		  Search.init()
		}
	}
	app.init()
</script>
</body>
</html>